<template>
  <div class="sale">
       <!--<button v-on:click="showpopup">showpopup</button>-->
      <!-- <mt-popup
        v-model="popupVisible"
        popup-transition="popup-fade">
        <div class="fullpage">
          1111
        </div>
      </mt-popup> -->

      <div class="guide">
        <img src="../../assets/sale/a.png" alt="">
      </div>

      <div class="from-list">
        <div class="list clearfix" v-on:click="gotoAddress('/brand')">
          <span class="name">品牌</span>
          <span class="value" v-html="saleData.manufacturer_name"></span>
          <span class="right-ico"><img src="../../assets/sale/b.jpg" alt=""></span>
        </div>
        <div class="list clearfix" v-on:click="gotoAddress('/type')">
          <span class="name">品类</span>
          <span class="value" v-html="saleData.category_name"></span>
          <span class="right-ico"><img src="../../assets/sale/b.jpg" alt=""></span>
        </div>
        <div class="list clearfix" v-on:click="gotoAddress('/newstep')">
          <span class="name">成色</span>
          <span class="value" v-html="saleData.attribute_name"></span>
          <span class="right-ico"><img src="../../assets/sale/b.jpg" alt=""></span>
        </div>
        <div class="list clearfix">
          <span class="name-length">心里预期售卖价格</span>
          <span class="ico"><img src="../../assets/sale/c.jpg" alt=""></span>
          <input type="text" placeholder="通常为全新价格的3-5折" class="price" v-model="saleData.price">
        </div>

        <div class="img-list-box">
          <div class="sub-tt">添加商品照片，便于鉴定师更好的评估：</div>
          <div class="img-list">

          <!--<span class="img-add" v-for="item in imgList">-->
            <!--<form enctype="multipart/form-data" >-->
              <!--<img :src="item.img" alt="">-->
              <!--<input name="file" type="file" placeholder="请选择上传图片" class="allImages" style="margin-left:-7px; margin-top:5px;" />-->
            <!--</form>-->
            <!--<i>{{item.txt}}</i>-->
          <!--</span>-->
          <span class="img-add">
            <form enctype="multipart/form-data" >
              <!--<img v-if="saleData.images==''" src="../../assets/sale/add.png" alt="">-->
              <!--<img v-if="saleData.images!=''" :src="saleData.images" alt="">-->
              <img src="../../assets/sale/add.png" alt="">
              <input name="file" type="file" placeholder="请选择上传图片" class="allImages" style="margin-left:-7px; margin-top:5px;" />
            </form>
            <i>前</i>
          </span>
          <span class="img-add">
            <form enctype="multipart/form-data" >
              <img src="../../assets/sale/add.png" alt="">
              <input name="file" type="file" placeholder="请选择上传图片" class="allImages" style="margin-left:-7px; margin-top:5px;" />
            </form>
            <i>后</i>
          </span>
          <span class="img-add">
            <form enctype="multipart/form-data" >
              <img src="../../assets/sale/add.png" alt="">
              <input name="file" type="file" placeholder="请选择上传图片" class="allImages" style="margin-left:-7px; margin-top:5px;" />
            </form>
            <i>左</i>
          </span>
          <span class="img-add">
            <form enctype="multipart/form-data" >
              <img src="../../assets/sale/add.png" alt="">
              <input name="file" type="file" placeholder="请选择上传图片" class="allImages" style="margin-left:-7px; margin-top:5px;" />
            </form>
            <i>右</i>
          </span>
          <span class="img-add">
            <form enctype="multipart/form-data" >
              <img src="../../assets/sale/add.png" alt="">
              <input name="file" type="file" placeholder="请选择上传图片" class="allImages" style="margin-left:-7px; margin-top:5px;" />
            </form>
            <i>更多</i>
          </span>
          </div>
        </div>

        <div class="add-ms">
          <div class="area-box">
            <textarea name="" id="" placeholder="添加备注或描述" v-model="saleData.description"></textarea>
          </div>
        </div>

        <div class="next-btn">
          <mt-button type="danger" size="large" v-on:click="setpFn('/sale2')">下一步</mt-button>
        </div>
      </div>


      <!--<mt-popup v-model="popupVisible" position="bottom" class="mint-popup-3" :modal="false">-->
        <!--<div class="fullpage">-->
          <!--1111-->
        <!--</div>-->
        <!--<mt-button @click.native="popupVisible = false" size="large" type="primary">关闭 popup</mt-button>-->
      <!--</mt-popup>-->
	<foot-guide></foot-guide>
  </div>
</template>


<script>

import footGuide from '../../components/footGuide'
import { Toast } from 'mint-ui';
import {Indicator} from 'mint-ui';
export default {
  name: 'Sale',
  data () {
    return {
      popupVisible: false,
//      defaultImg:"",
      imgList:[],
      saleData:{
        manufacturer_id:'',
        manufacturer_name:'',
        category_id:'',
        category_name:'',
        attribute_id:'',
        attribute_name:'',
        price:'',
        images:'',
        description:'',
      }
    }
  },
  components: {
      footGuide
  },
  mounted:function(){

    var saleData = sessionStorage.getItem('saleData') && JSON.parse(sessionStorage.getItem('saleData'));

//    console.log(saleData.images);


    $.extend(this.saleData,saleData);

    var _this = this;

    $('.allImages').on('change',function(){
      var index = $(this).parents('.img-add').index();

      var formData = new FormData($(this).parent('form')[0]);
      var $this = $(this);
      Indicator.open({
        text: "图片上传中...",
        spinnerType: 'fading-circle'
      });
      $.ajax({
        url: RouteMap.imgUpload,
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false
      })
        .done(function(res) {


          if(res.code == 200){


            var newImg = new Image();
            newImg.src = res.data.image_url;
            newImg.onload = function(){
//              alert(1)
              Indicator.close();
              Toast('上传成功')
            }
            newImg.onerror = function(){
              Indicator.close();
            }
            $this.parent().find('img').attr('src',res.data.image_url);


            _this.imgList.push(res.data.image_url);
          }
          else{
            //Toast(res.msg)
            Indicator.close();

            return;
          }

        }).fail(function(res) {
        Indicator.close();

        Toast('图片上传失败')
      });
    })

  },
  methods: {
    showpopup(){
      this.popupVisible = true;
    },
    gotoAddress(path){
      this.$router.push(path)
    },
    setpFn:function(path){
      var saleData = this.saleData;
//      console.log(saleData)

      var _this = this;
      if(_this.imgList.length==0){
        Toast('请上传图片');
      }

      _this.saleData.images = _this.imgList.join(',');

      if(saleData.manufacturer_id == '' || saleData.category_id == '' || saleData.attribute_id == '' || saleData.price == '' || saleData.description == '' || saleData.images == '')
      {
        Toast('请认真填写数据');
        return;
      }

      sessionStorage.setItem('saleData',JSON.stringify(saleData));
      _this.$router.push(path)



    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .sale{
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .guide{
    margin-top: 0.5rem;
  }
  .guide img{
    width: 100%;
  }

  .from-list{
    margin-top: 0.5rem;
  }
  .list{
    margin-top: 0.6rem;
    background: #f5f5f5;
    border-radius: 0.75rem;
    font-size: .6rem;
    color:#707070;
    padding: 0.1rem;
  }
  .list span{
    display: inline-block;
    vertical-align: middle;
    padding: 0.35rem 0;
  }
  .list .right-ico{ float: right;}
  .list .right-ico img{
    width: 0.45rem;
    margin-top: 0.1rem;
    margin-right: 0.5rem;
  }
  .list .value{ padding-left: 0.3rem;}
  .list .ico img{ width: 0.5rem; margin-left: 0.5rem; margin-top: 0.1rem; margin-right: 0.1rem;}
  .list .name{
    padding-left: 0.5rem;
    display: inline-block;

  }
  .list .name-length{
    padding-left: 0.5rem;
    text-align: center;
    display: inline-block;

  }
  .list .price{ font-size: .5rem; display: inline-block; vertical-align: middle; width: 6.2rem;}
  .list .price::-webkit-input-placeholder {
    color:#c2c2c2;
  }
  .img-list-box{
    padding: 0.5rem 0.3rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .sub-tt{padding: 0.3rem 0 0.5rem; color:#707070;}
  .img-list{
    font-size: 0;
  }
  .img-add{
    display: inline-block;
    width: 2.4rem;
    text-align: center;
    margin: 0 0.1rem;
    font-size: .6rem;
  }
  .img-add form{
    display: inline-block;
    width: 2.4rem;
    height:2.4rem;
    overflow: hidden;
    position: relative;
  }
  .img-add input{
    position: absolute;
    top: 0;
    left: 0;
    height: 2.4rem;
    opacity: 0.00001;
  }
  .img-add img{
    width: 100%;
    height: 100%;
  }
  .area-box textarea{ width: 12rem; height: 4rem; margin-top: 0.3rem;}
  .next-btn{
    padding-bottom: 4rem;
  }
.mint-popup-3 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.mint-popup-3 .mint-button {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}
  textarea{
    overflow: hidden;
    border: 1px solid #f2f2f2;
    border:none;
    box-shadow:none;
    resize:none;
    line-height: 1.1rem;;
  }
</style>
